<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Dialog</title>
    <script src="../../src/meteora.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="../css/test.css" />
  </head>
  <body>

    <h1>Meteora.Dialog</h1>

    <div class="instructions">
      This is a simple dialog control. Click "cancel" and follow the boxes.
    </div>

    <script type="text/javascript">
      
      Meteora.uses('Meteora.Dialog');

      Meteora.onStart(
        function() {
          Dialog.prompt('Your password', {
            
            // default value
            'default': '1337h4x0r',

            // action when the user presses OK
            'onOk': function(dialog) {
              if (dialog.input.value) {
                Dialog.alert('Your password was: '+dialog.input.value);
                dialog.close();
              } else {
                Dialog.alert('Please fill the blank');
              }
            },

            // action when the user cancels the dialog
            'onCancel': function(dialog) {
              if (dialog.input.value) {
                Dialog.alert('Please, empty the input first.');
              } else {
                Dialog.question(
                  'Are you sure to quit?',
                  {
                    'onYes': function(dialog) {
                      dialog.close();
                      this.close();
                    }.bind(this)
                  }
                );
              }
            }
          });
        }
      );
    </script>

  </body>
</html>
